<template>
	<!-- 星星 -->
	<view class="u-flex">
		<view v-for="(item,q) in star" :key="q" class="u-margin-right-4">
			<u-icon name="star-fill" :color="item" size="22"></u-icon>
		</view>
		<text class="u-font-20 text-color-765CFE u-margin-left-14">{{score}}分</text>
	</view>
</template>

<script>
	export default {
		name:"star",
		props: {
			score: {
				type: [Number,String],
				default: 5
			},
		},
		computed: {
			star() {
				const colorArr = [];
				const max = 5;
				const defaultColor="rgba(46, 45, 62, 0.27)"
				const activeColor="#F6B37F"
				let defaultNum = 1;
				while (defaultNum<=max){
					defaultNum++;
					colorArr.push(defaultColor)
				}
				return colorArr.map((val,index)=>index+1<=this.score?activeColor:val)
			}
		},
	}
</script>

<style lang="scss">

</style>
